<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kuai Test</title>
    <link rel="shortcut icon" href="./img/mangosteen.svg">
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">

    <link rel="stylesheet" href="./css/consolelog.css">
    <link rel="stylesheet" href="./css/storage.css">
    <link rel="stylesheet" href="./css/network.css">
    <style>
        * {
            box-sizing: border-box;
            /* font-family: Georgia, serif; */
        }

        html {
            background: url(./img/noise.jpg)
        }

        body {
            font-family: Consolas;
        }

        .vlog-console {
            max-width: 500px;
            /* box-shadow: 0 0 4px rgba(0, 0, 0, .3); */
        }

        .console-test-btn {
            display: flex;
            /* justify-content: space-between; */
            flex-direction: row;
            margin-bottom: 20px;
        }

        .console-btn:not(:last-child) {
            margin-right: 10px;
        }

        .console-panel {
            display: flex;
            flex-direction: row;
            height: 50px;
            font-size: 14px;
        }

        .panel-item {
            display: flex;
            align-items: center;
            padding-left: 10px;
            height: 40px;
            width: 80px;
            border: 1px solid #000;
        }

        .panel-item {
            margin-right: 6px;
        }

        .panel-item:hover {
            background-color: #dddddd;
            cursor: pointer;
        }

        .none-show {
            display: none;
        }

        .console-select {
            border-bottom: 1px solid var(--VC-FG-3);
            background-color: #fff;
            min-height: 500px;
            font-size: 14px;
            /* font-family: Consolas; */
        }
    </style>

    <script src="./js/kuai_tool.js"></script>
    <script src="./js/ajax_init.js"></script>
</head>

<body>
    <div class="vlog-console">
        <div class="console-test-btn">
            <button id="cors-request" class="console-btn">cors请求</button>
            <button id="error-request" class="console-btn">错误请求</button>
        </div>
        <div class="console-panel" id="console-panel">
            <div id="panel-log" class="panel-item btn-active">log</div>
            <div id="panel-storage" class="panel-item">storage</div>
            <div id="panel-network" class="panel-item">network</div>
            <div id="panel-clean" class="panel-item">clean</div>
        </div>

        <div class="console-content">
            <div id="console-log" class="console-select ">
                <!-- log info -->
            </div>

            <div id="console-storage" class="console-select none-show">
                <div class="table-storage">
                    <div id="storage-cookies" class="storage-head storage-head-active">Cookies</div>
                    <div id="storage-sessionstorage" class="storage-head">SessionStorage</div>
                    <div id="storage-localstorage" class="storage-head">LocalStorage</div>
                </div>
                <div class="table-storage">
                    <div class="item-storage">Key</div>
                    <div class="item-storage">Value</div>
                    <div class="item-storage"></div>
                </div>

                <div class="storage-info cookie-info">
                    <div class="table-storage">
                        <div class="item-storage">vConsole_switch_y</div>
                        <div class="item-storage">20</div>
                        <div class="item-storage"></div>
                    </div>
                </div>
                <div class="storage-info session-info none-show">
                    <div class="table-storage">
                        <div class="item-storage">session</div>
                        <div class="item-storage">20</div>
                        <div class="item-storage"></div>
                    </div>
                </div>
                <div class="storage-info local-info none-show">
                    <div class="table-storage">
                        <div class="item-storage">local</div>
                        <div class="item-storage">222</div>
                        <div class="item-storage"></div>
                    </div>
                </div>
            </div>

            <div id="console-network" class="console-select none-show">
                <div class="table-network-row">
                    <div class="item-network network-name">Name</div>
                    <div class="item-network network-status">Status</div>
                    <div class="item-network network-type">Type</div>
                    <div class="item-network network-other"></div>
                </div>

                <div class="table-info" id="0">
                    <div class="table-network-row">
                        <div class="item-network-output network-name">/api/todo/all/cors</div>
                        <div class="item-network-output network-status">200 OK</div>
                        <div class="item-network-output network-type">GET</div>
                        <div class="item-network-output network-other"></div>
                    </div>
                    <div class=" table-detail none-show">
                        <div class="detail-item">
                            <strong>General</strong>
                        </div>
                        <div class="detail-item">
                            <strong>Request URL : </strong>
                            <span class="detail-item-content">http://localhost：2300/epi/todo/sll/cors</span>
                        </div>
                        <div class="detail-item">
                            <strong>Content-Type : </strong>
                            <span class="detail-item-content">application/json</span>
                        </div>
                        <div class="detail-item">
                            <strong>Request Method : </strong>
                            <span class="detail-item-content">GET</span>
                        </div>
                        <div class="detail-item">
                            <strong>Status Code : </strong>
                            <span class="detail-item-content">200 OK</span>
                        </div>
                        <div class="detail-item">
                            <strong>User-Agent : </strong>
                            <span class="detail-item-content">Mozi1le/5.0 （Mindows NT 10.0； Win64；
                                x64）AppleMebKit/537.36 （KHTML，1ike Gecko）Chrome/89.0.4389.114 Safari/537.36</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/log.js"></script>
    <script src="./js/storage.js"></script>
    <script src="./js/network.js"></script>
    <script src="./js/kuai.js"></script>
</body>

</html>